<template>
  <div class="">
	<iw-header></iw-header>
    <!--面包屑导航-->
	<bread-crumb>&gt;课程详情</bread-crumb>
  
    <!--主体内容-->
    <article class="container">
        <section class="course_head clearfloat">
            <div class="course_img">
                <!-- 图片路径加载问题  如果是从../assets下加入的哟要使用require -->
                <!--①拼接也行 <img :src='require("../assets/images/banner"+imgi+".jpg")' alt=""/>  -->
				<!-- ②模板字符串也行，只是xhbuilder没有显示 -->
                <img :src='require(`../assets/images/banner${imgi}.jpg`)' alt=""/>  
            </div>
            <aside class="course_info">
                <h2></h2>
                <ul>
                   <li>讲师：鼻孔超人{{data.cid}}</li>
                    <li>课时：{{data.cLength}}</li>
                    <li>开课时间：{{data.startTime}}</li>
                    <li>上课地点：{{data.address}} <router-link to="address">查看各校区地址</router-link></li>
                </ul>
                <p>课程价格：<strong id="price">{{data.price|currency}}</strong></p>
                <div class="course_link">
					<!-- 加入购物车尚未实现 -->
                    <span href="" id="addCart" @click="addCart()"><em class="icon-cart" ></em>加入购物车</span>
                    <button href="" id="favorite" @click="addFavorite()">加入收藏</button>
                </div>
            </aside>
        </section>
        <section class="course_detail">
            <h2 class="title"><span>课程详情</span></h2>
            <div class="details">
              <p v-html="data.details"></p>
            </div>
			<!-- 按钮点击返回课程列表 -->
			<router-link to="" class="back" tag="button">返回课程列表</router-link>
			
        </section>
    </article>
	<iw-footer></iw-footer>
  </div>
</template>

<script>
import Header from '../components/Header.vue';
import Footer from '@/components/Footer.vue';
import BreadCrumb from '../components/Breadcrumb.vue';
export default {
	data:()=>{
		return { 
			//动态获取当前的cid
			cid:1,
			data:[],
			imgi:1
		}
	},
	
	mounted(){
		//取1-3随机数当做课程图片
		this.imgi=Math.ceil(Math.random()*4);
		console.log("imgi",this.imgi)
		this.cid=this.$route.params.cid;
		// console.log("this.cid",this.cid);
		//获取响应的数据
		this.$http.get("/course/detail?cid="+this.cid).then(result=>{
			this.data=result.data;
			// console.log("获取的结果是",this.data);
		}).catch(err=>{
			throw err;
		});
		
	},
	
	methods:{
		//将列表添加到购物车中
		addCart:function(){
			
		},
		//添加到收藏夹
		addFavorite:function(){
			//如果没有登录
			console.log("用户uid",this.$store.state.userInfo.uid)
			if(!this.$store.state.userInfo.uid){
				alert("还没登录，请先登录");
			}else{
				//
				let data={
					uid:this.$store.state.userInfo.uid,
					cid:this.cid
				}
				this.$http.post("/favorite/add",data).then(result=>{
					alert("添加成功！！！");
					
				}).catch(err=>{
					console.log("添加收藏夹出错",err);
				})
			}
		}
	},
	components:{
		'iw-header':Header,
		'iw-footer':Footer,
		'bread-crumb':BreadCrumb
	}
}	
</script>

<style scoped>
	/*课程详情页*/
	.back{
		float:right;
		margin-right:20px;
		
		background-color:#218838;
		line-height: 34px;
		color: #fff;
		padding: 0 20px 0 16px;
		font-size: 16px;
		
	}
	.course_head{
		/* margin-top: 10px; */
	}
	.course_head .course_img {
		
	    float: left;
	    width: 600px;
	    height: 270px;
	    overflow: hidden;
	}
	.course_head .course_img>img {
	    /* display: block; */
	    /* width:100%; */
		height:100%;
		margin-left:-40px;
	}
	.course_info {
	    float: left;
	    margin-left: 76px;
	}
	.course_info>h2 {
	    font-size: 24px;
	    font-weight: lighter;
	}
	.course_info>ul {
	    background: #f5f5f5;
	    width: 320px;
	    height: 120px;
	    color: #888;
	    padding: 10px 0 0 14px;
	    box-sizing: border-box;
	    margin-top: 16px;
	}
	.course_info>ul>li>a {
	    color: #f60;
	    text-decoration: underline;
	}
	.course_info>ul>li>a:hover {
	    color:#f30;
	}
	.course_info>p {
	    color: #888;
	}
	.course_info>p>strong {
	    font-size: 20px;
	    color: #f60;
	    font-weight: lighter;
	    line-height: 56px;
	}
	.course_link>span {
	    display: inline-block;
	    vertical-align: middle;
	    background: #f90;
	    line-height: 34px;
	    color: #fff;
	    padding: 0 20px 0 16px;
	    font-size: 16px;
	    margin-right: 16px;
	    cursor:pointer;
	}
	.course_link>span:hover {
	    background: #ff8a00;
	}
	.course_link>span .icon-cart {
	    background-position: 0 -500px;
	}
	.course_link>button {
	    font-size: 14px;
		
		color:#1E7E34;
		border:none;
		background-color: transparent;
	}
	.course_link>button:hover{
		color:orangered;
	}
	
	.course_detail {
	    margin-top: 60px;
	}
	.details {
	    padding: 20px 40px;
	    font-size: 14px;
	    line-height: 28px;
	    color: #666;
	}
	.details p {
	    text-indent: 28px;
	}
	
</style>
